<template>
  <div class="page bgc-fff">
    <x-header title="报班历史"></x-header>
    <div v-if="classHistoryData.length === 0" class="f14 pad15 mt46 ta-c c-666">
      您的公司暂无报班历史信息
    </div>
    <v-loadmore v-else :top-method="loadTop" :bottom-method="loadBottom"
                :bottom-all-loaded="allLoaded" class="mt46"
                :auto-fill="false" ref="loadmore">
      <div class="add-class-history-item" v-for='(item,index) in classHistoryData' :key='index'>
        <!-- time -->
        <!-- checkinStatus 报班状态 -->
        <!-- 10-申请取消;20-已取消;30-已安排;40-未安排;50-已失效(过期) -->
        <div class="main-time bor-bottom">
          <div class="flex l-center a-left">
            <img class="icon-time mr15" :src="staticImgData.timeUrl" alt="">
            <div class="f14 c-445c95 ta-l line-h32">
              {{item.gmtCreate| parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
            </div>
          </div>
          <!--<div  v-if="item.checkinStatus ==='40'" style="width:.6rem;">-->
            <!--<p class="min-btn bgc-01a4f6">取消</p>-->
          <!--</div>-->
          <p v-if="item.checkinStatus ==='40'" class="c-1E90FF">未安排</p>
          <p v-else-if="item.checkinStatus ==='50'" class="c-1E90FF">已失效</p>
          <p v-else-if="item.checkinStatus ==='30'" class="c-1E90FF">已安排</p>
          <p v-else-if="item.checkinStatus ==='20'" class="c-1E90FF">已取消</p>
          <p v-else-if="item.checkinStatus ==='10'" class="c-1E90FF">申请取消中</p>
        </div>
        <!-- fill-box -->
        <div class="fill-box  bor-bottom">
          <div class="fill-item fill-b">
            <i class="mr25 bgc-1e90ff "></i>
            <div class="fill-input bor-bottom">
              <!-- <input type="text"  placeholder="请输入意向起运地(城市)"
                                        v-model.trim="driverParam.wantStartPlace">  -->
              <div>{{item.departRegion}}</div>
            </div>
            <div style="clear:both;"></div>
          </div>
          <div class="fill-item">
            <i class="mr25 bgc-ff9b7b "></i>
            <div class="fill-input">
              <!-- <input type="text" class="" placeholder="请输入意向目的地(城市)"
                                        v-model.trim="driverParam.wantEndPlace">   -->
              <div>{{item.destRegion}}</div>
            </div>
            <div style="clear:both;"></div>
          </div>
        </div>
        <!-- input -->
        <div class="input-cells bor-bottom">
          <div class="f-fl input-label">司机</div>
          <div class="cell-input">{{item.driverName}}</div>
        </div>
        <div class="input-cells bor-bottom">
          <div class="f-fl input-label">牵引车车牌</div>
          <div class="cell-input">{{item.carrierPlate}}</div>
        </div>
        <div class="input-cells bor-bottom">
          <div class="f-fl input-label">挂车车牌</div>
          <div class="cell-input">{{item.trailerPlate}}</div>
        </div>
        <div class="input-cells bor-bottom">
          <div class="f-fl input-label">当前位置</div>
          <div class="cell-input">{{item.checkinAddr}}</div>
        </div>
        <div class="input-cells bor-bottom ">
          <div class="f-fl input-label">可装载台数</div>
          <div class="cell-input">{{item.amtExp}}台</div>
        </div>
        <div class="input-cells">
          <div class="f-fl input-label">计划装车时间</div>
          <div class="cell-input">{{item.gmtExpLoad | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</div>
        </div>
        <!-- 间隔 -->
        <div class="mo-spacing"></div>
      </div>
    </v-loadmore>
    <v-loading v-show="loadingShow"></v-loading>
  </div>
</template>

<script type="text/ecmascript-6">
  import * as TenantApi from '@/api/tenant'
  import { XHeader } from 'vux'
  import Loading from '@/components/common/loading/loading'
  import { Toast, Loadmore } from 'mint-ui'
  export default {
    name: 'me-adminCheckinList',
    data() {
      return {
        staticImgData: {
          timeUrl: require('@/assets/image/v1/user/add_class_history/icon_time.png')
        },
        classHistoryData: [],
        page: {
          current: 1,
          size: 3,
          total: 1,
          condition: {
            driverId: ''
          }
        },
        loadingShow: false,
        allLoaded: false, // 是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了
        scrollMode: 'auto' // 移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动
      }
    },
    created() {
      this.loadPageList()
    },
    mounted() {
    },
    components: {
      XHeader,
      'v-loading': Loading,
      'v-loadmore': Loadmore
    },
    methods: {
      loadTop: function() { // 组件提供的下拉触发方法
        // 下拉加载
        this.loadingShow = true
        this.allLoaded = false// 刷新时置为true
        this.page.current = 1// 从第1页开始
        this.loadPageList()
        this.$refs.loadmore.onTopLoaded() // 固定方法，查询完要调用一次，用于重新定位
      },
      loadBottom: function() {
        // 上拉加载
        this.loadingShow = true
        this.getMore() // 上拉触发的分页查询
        this.$refs.loadmore.onBottomLoaded() // 固定方法，查询完要调用一次，用于重新定位
      },
      loadPageList: function() {
        // 查询数据
        const that = this
        that.page = {
          current: 1,
          size: 3,
          total: 1,
          condition: {
          }
        }
        that.loadingShow = true
        TenantApi.companyCheckinList(that.page).then(res => {
          // 是否还有下一页，加个方法判断，没有下一页要禁止上拉
          if (res.code === 0) {
            that.classHistoryData = res.data.records
            if (that.page.current > 1) {
              that.isHaveMore(res.data)
            }
            that.loadingShow = false
          } else {
            console.warn('error', res)
            that.loadingShow = false
          }
          that.$nextTick(function() {
            that.scrollMode = 'touch'
          })
        }).catch(res => {
          this.loadingShow = false
          console.warn('error', res)
        })
      },
      getMore: function() {
        // 分页查询
        const that = this
        that.page.current = parseInt(that.page.current) + 1
        TenantApi.companyCheckinList(that.page).then(res => {
          this.loadingShow = false
          if (res.code === 0) {
            that.classHistoryData = that.classHistoryData.concat(res.data.records)
            if (that.page.current > 1) {
              that.isHaveMore(res.data)
            }
          }
        }).catch(res => {
          this.loadingShow = false
          console.warn('error', res)
        })
      },
      isHaveMore: function(data) {
        // 是否还有下一页，如果没有就禁止上拉刷新
        const that = this
        const now_show_num = that.classHistoryData.length
        const get_total = data.total
        if (now_show_num < get_total) {
          // 展示的条数 小于 后端总条数 还可以下拉加载更多
          this.allLoaded = false
        } else if (now_show_num === get_total) {
          // 展示的条数 等于 后端总条数 没有更多数据 不能进行下拉加载
          this.allLoaded = true
          Toast({
            message: '没有更多数据了',
            duration: 1000
          })
        }
      }
    }
  }
</script>

<style scoped>
  @import '../../styles/util.css';
  /* common */
  .page{
    overflow-y: auto;
  }
  .cell-input{
    color: #000;
  }
  .input-label{
    color:#999;
  }
  /* main */
  .main-time{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .06rem .15rem;
  }
  .icon-time{
    width: .13rem;
    height: .13rem;
  }
</style>

